<!--
 * @Description: 修改密码页面组件
 * @Author: hai-27
 * @Date: 2020-02-20 17:22:56
 * @LastEditors: hai-27
 * @LastEditTime: 2020-03-12 19:34:00
 -->
<template>
    <div>
        <el-form label-width="auto" :model="userPassword" :rules="rules" ref="userPassword" style="max-width: 600px">
            <el-form-item label="原密码" prop="oldPassword">
                <el-input v-model="userPassword.oldPassword" placeholder="请输入原密码:" autocomplete="off"/>
            </el-form-item>

            <el-form-item label="新密码" prop="newPassword">
                <el-input v-model="userPassword.newPassword" placeholder="请输入新密码:" autocomplete="off"/>
            </el-form-item>

            <el-form-item label="重复新密码" prop="reNewPassword">
                <el-input v-model="userPassword.reNewPassword" placeholder="请再次输入新密码:" autocomplete="off"/>
            </el-form-item>

            <el-button class="shop-cart" @click="updatePassword()">修改</el-button>
        </el-form>
    </div>
</template>
<script>
    import {mapActions} from "vuex";

    export default {
        data() {
            let validateOldPass = (rule, value, callback) => {
                if (value === "") {
                    return callback(new Error("请输入原密码"));
                }
                const oldPassRule = /^[a-zA-Z]\w{5,17}$/;
                if (oldPassRule.test(value)) {
                    this.$axios
                        .post("/user/findUserPassword", {
                            id: this.user.id,
                            password: this.userPassword.oldPassword
                        })
                        .then(res => {
                            if (res.code === 0) {
                                this.$refs.ruleForm.validateField("checkPass");
                                return callback();
                            } else {
                                return callback(new Error(res.msg));
                            }
                        })
                        .catch(err => {
                            return Promise.reject(err);
                        });
                } else {
                    return callback(
                        new Error("字母开头,长度6-18之间,允许字母数字和下划线")
                    );
                }
            }
            let validateNewPass = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error("请输入新密码"));
                }
                const newPassRule = /^[a-zA-Z]\w{5,17}$/;
                if (newPassRule.test(value)) {
                    this.$refs.ruleForm.validateField("checkPass");
                    return callback();
                } else {
                    return callback(
                        new Error("字母开头,长度6-18之间,允许字母数字和下划线")
                    );
                }
            }
            let validateReNewPass = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error("请重新输入新密码"));
                }
                if (this.userPassword.newPassword !== "" && value === this.userPassword.newPassword) {
                    this.$refs.ruleForm.validateField("checkPass");
                    return callback();
                } else {
                    return callback(new Error("两次输入的密码不一致"));
                }
            }
            return {
                user: "",
                userPassword: {
                    oldPassword: "",
                    newPassword: "",
                    reNewPassword: ""
                },
                rules: {
                    oldPassword: [{ validator: validateOldPass, trigger: "blur" }],
                    newPassword: [{ validator: validateNewPass, trigger: "blur" }],
                    reNewPassword: [{ validator: validateReNewPass, trigger: "blur" }]
                }
            }
        },
        created() {
            this.getUser(this.$store.getters.getUser.id);
        },
        methods: {
            ...mapActions(["setUser", "setShowLogin"]),
            getUser(val){
                // 判断是否登录,没有登录则显示登录组件
                if (!this.$store.getters.getUser) {
                    this.$store.dispatch("setShowLogin", true);
                    return;
                }
                this.$axios
                    .get(`user/selectById/${val}`)
                    .then(res => {
                        if (res.code === 0) {
                            this.user = res.data;
                        }
                    })
                    .catch(err => {
                        return Promise.reject(err);
                    });
            },
            updatePassword(){
                this.user.password = this.userPassword.newPassword;
                this.$axios
                    .put("/user/updatePassword", this.user)
                    .then(res => {
                        if (res.code === 0) {
                            // 登录信息存到本地
                            let user = JSON.stringify(this.user);
                            localStorage.setItem("user", user);
                            // 登录信息存到vuex
                            this.setUser(this.user);
                            this.notifySucceed(res.msg);
                        } else {
                            //修改失败
                            this.notifyError(res.data.msg);
                        }
                    })
                    .catch(err => {
                        return Promise.reject(err);
                    });
            },
        }
    };
</script>
<style scoped>

</style>